<template>
  <div class="control-bar">
    <el-button-group>
      <el-button type="plain" size="mini" @click="$_arrowSet">{{ arrowSetFlag == 1 ? arrowText.yes_text :
        arrowText.no_text
      }}</el-button>
      <!-- <el-button type="plain" size="small" @click="$_zoomIn">放大</el-button>
      <el-button type="plain" size="small" @click="$_zoomOut">缩小</el-button> -->
      <el-button type="plain" size="mini" @click="$_zoomReset">大小适应</el-button>
      <el-button type="plain" size="mini" @click="$_translateRest">定位还原</el-button>
      <el-button type="plain" size="mini" @click="$_reset">还原(大小&定位)</el-button>
      <!-- <el-button type="plain" size="small" @click="$_undo" :disabled="undoDisable">上一步</el-button>
      <el-button type="plain" size="small" @click="$_redo" :disabled="redoDisable">下一步</el-button> -->
      <el-button type="plain" size="mini" @click="$_download">下载图片</el-button>
      <el-button type="plain" size="mini" @click="$_showMiniMap">查看缩略图</el-button>
    </el-button-group>
  </div>
</template>
<script>
export default {
  name: 'Control',
  props: {
    lf: Object || String,
    catTurboData: Boolean
  },
  data() {
    return {
      undoDisable: true,
      redoDisable: true,
      graphData: null,
      dataVisible: false,
      arrowSet: {
        arrow: {
          offset: 6, // 箭头垂线长度
          verticalLength: 0, // 箭头底线长度
        }
      },
      arrowSetFlag: 1,
      arrowText: {
        yes_text: "有箭头",
        no_text: "无箭头"
      }
    }
  },
  mounted() {
    this.$props.lf.on('history:change', ({ data: { undoAble, redoAble } }) => {
      this.$data.undoDisable = !undoAble
      this.$data.redoDisable = !redoAble
    });
  },
  methods: {

    $_arrowSet() {
      if (this.arrowSetFlag == 1) {
        this.arrowSet.arrow.verticalLength = 0
        this.arrowSetFlag = 0
      } else {
        this.arrowSet.arrow.verticalLength = 2
        this.arrowSetFlag = 1
      }
      this.$props.lf.setTheme(this.arrowSet)
    },


    $_zoomIn() {
      this.$props.lf.zoom(true);
    },
    $_zoomOut() {
      this.$props.lf.zoom(false);
    },
    $_zoomReset() {
      this.$props.lf.resetZoom();
    },
    $_translateRest() {
      this.$props.lf.resetTranslate();
    },
    $_reset() {
      this.$props.lf.resetZoom();
      this.$props.lf.resetTranslate();
    },
    $_undo() {
      this.$props.lf.undo();
    },
    $_redo() {
      this.$props.lf.redo();
    },
    $_download() {
      this.$props.lf.getSnapshot();
    },
    $_catData() {
      this.$emit('catData');
    },
    $_catTurboData(){
      this.$emit('catTurboData');
    },
    $_showMiniMap() {
      const { lf } = this.$props;
      lf.extension.miniMap.show(lf.graphModel.width - 150, 40)
    }
  }
}
</script>
<style scoped></style>
